import React, { Component } from 'react';
import { NavBar, Toast, SearchBar } from 'antd-mobile'
import '../styles/Hotseach.scss'
import service from '../api'
class Hotseach extends Component {
    constructor(props){
        super(props)
        this.state={
                hotlist:[],
                keyword:''
        }
    }
    onChange(e){
        this.setState({
            [e.target.name]:e.target.type == 'checkbox' ? e.target.checked:e.target.value})
    }
    async componentDidMount (){
        var res = await service.pro.pro_hotword({keyword:this.state.keyword})
        console.log(res.data.data);
        this.setState({hotlist:res.data.data})
    }
    render() {
        return (
            <div className='hotseach'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>
                        热门搜索
                    </NavBar>
                </div>
                <div className="sou">
                    <input type="text" placeholder='请输入搜索内容' name='keyword' value={this.state.keyword} onChange={(e)=>{this.onChange(e)}}/>
                    <div className="btn" onClick={()=>{this.props.history.push('/seach',{keyword:this.state.keyword})}}>
                        搜索
                    </div>
                </div>
                <div className="history">
                    <h3>最近搜索 <span className='iconfont '></span> </h3>
                </div>
                <div className="hot">
                    <h3>热门搜索</h3>
                    <div className="text">
                    {
                        this.state.hotlist.map((item,index)=>{
                            return (
                                <div className="name" key={index}>
                                    <div className="keyword" onClick={()=>{this.props.history.push('/seach',{keyword:this.state.keyword})}} > {item.keyword}</div>
                                </div>
                            )
                        })
                    }
                    </div>
                </div>
            </div>
        );
    }
}

export default Hotseach;